<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flask-web</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    html,body {
        height: 100%;
        width:100%;
        font-family:"微软雅黑";
        color: white;
        background-color: #000000;
    }
    .container{
        height: 80%;
        width: 40%;
        position: absolute;
        left: 30%;
        top: 10%;
    }
    .main{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid #fff;
    }
    .tip{
        flex: 1;
        text-align: center;
        line-height: 6.0;
        border-bottom: 1px solid #fff;
    }
    .users-list{
        flex: 8;
        border-bottom: 1px solid #fff;
        overflow: auto;
    }
    .users-op{
        flex:2;
        display: flex;
        flex-direction: column;
    }
    table{
        width: 100%;
        table-layout: fixed;
        text-align: center;
    }
    table td{
        min-height: 40px;
    }
    tr:hover{
        background-color: gray;
    }
    .jsb{
        max-width: 30px;
    }
    .no-jsb{
        display: none;
    }

    .top{
        flex: 1;
        display: flex;
        flex-direction: row;
    }
    .op{
        flex: 1;
        text-align: center;
        border: 1px solid #ffffff;
    }
    .bottom{
        flex: 1;
    }
    .op-jsb{
        max-width: 40px;
        margin: 5px;
    }
    .op:active{
        background-color: gray;
    }
    .btn{
        width: 100%;
        height: 100%;
    }
    .btn:active{
        background-color: gray;
    }
</style>
<body>
<div class="container">
    <div class="main">
        <div class="tip">准备</div>
        <div class="users-list">
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td>Tom</td>
                    <td><img class="jsb" src="../static/img/2.png"></td>
                    <td><img class="no-jsb" src="../static/img/0.png"></td>
                    <td><img class="no-jsb" src="../static/img/5.png"></td>
                </tr>
                <tr>
                    <td>我</td>
                    <td><img class="no-jsb" src="../static/img/2.png"></td>
                    <td><img class="jsb" src="../static/img/0.png"></td>
                    <td><img class="no-jsb" src="../static/img/5.png"></td>
                </tr>
            </table>
        </div>
        <div class="users-op">
            <div class="top">
                <div class="op"><img class="op-jsb" src="../static/img/2.png"></div>
                <div class="op"><img class="op-jsb" src="../static/img/0.png"></div>
                <div class="op"><img class="op-jsb" src="../static/img/5.png"></div>
            </div>
            <div class="bottom">
                <input class="btn" type="button" value="准备"/>
            </div>
        </div>
        <div></div>
    </div>
</div>
<script type="application/javascript">

    console.log("https://gitee.com/lhlyu/flask-chat")

    let ws = null

    let userId = + new Date()

    // let url = "ws://localhost:8080/ws/" + userId
    let url = "ws://lhlyu.com/ws/" + userId

    ws = new WebSocket(url)

    ws.onopen = function(event){
        addLiSysMsg("连接上服务器...",0)
        openInit()
    }

    ws.onclose = function(event){
        addLiSysMsg("关闭连接...",0)
    }

    ws.onerror = function(event){
        addLiSysMsg("连接异常:",1)
    }

    ws.onmessage = function(event){
        let msgObject = JSON.parse(event.data);
        if(msgObject.type === 0){
            //系统消息
            setUsers(msgObject)
        }else if(msgObject.type === 1){
            addLi(msgObject)
        }else if(msgObject.type === 2){
            setRecords(msgObject.data)
        }
    }

    //打开时初始化
    function openInit(){
        let account = document.getElementsByClassName("account")[0]
        account.innerHTML = "用户当前账号:" + userId
    }

    //发送消息
    function send(){
        ws.send(msgObject)

    }
</script>
</body>
</html>